'use client';
import { Key, useEffect, useRef, useState } from 'react';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import Slider from 'react-slick';
import styled from 'styled-components';
import { inter, roboto } from './fonts';
import Image from 'next/image';

export default function BannerSlider() {
  const settings = {
    customPaging: function (i: Key | null | undefined) {
      return <a className={'flex-1'} key={i} />;
    },
    autoplay: true,
    dots: true,
    dotsClass: 'slick-dots slick-thumb w-full',
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '20%',
    nextArrow: '',
    prevArrow: null,
    autoplaySpeed: 4000,
  } as object;

  return (
    <SliderEl className="slider-container">
      {/*@ts-expect-error*/}
      <Slider {...settings}>
        <div
          className={
            'slider-item relative !flex h-[276px] flex-col rounded-[10px] p-6'
          }
        >
          <Image
            src={'/banner-icon-1.png'}
            alt={'1'}
            width={200}
            height={200}
            className={'absolute right-[-45px] bottom-0'}
          />
          <h1
            className={`text-[26px] font-semibold text-white uppercase ${roboto.className} overflow-ellipsis lg:text-nowrap`}
          >
            Insightful and confident from the start
            <div
              className={'h-2 w-32 bg-linear-to-r from-transparent to-white'}
            />
          </h1>
          <div className={`mr-20 flex flex-col gap-4 pt-8 text-white`}>
            <div>
              <div className={`text-[22px] font-semibold`}>
                Accurate forecasting of demand
              </div>
              <div className={`text-[16px] font-light ${inter.className}`}>
                Uncover trends to adjust your predication accordingly to save
                the cost.
              </div>
            </div>
            <div>
              <div className={`text-[22px] font-semibold`}>
                Pick your most reliable suppliers
              </div>
              <div className={`text-[16px] font-light ${inter.className}`}>
                Make better decisions with real time price and lead time
                analytics.
              </div>
            </div>
          </div>
        </div>

        <div
          className={
            'slider-item relative !flex h-[276px] flex-col rounded-[10px] p-6'
          }
        >
          <Image
            src={'/banner-icon-2.png'}
            alt={'1'}
            width={200}
            height={200}
            className={'absolute right-[-45px] bottom-0'}
          />
          <h1
            className={`text-[26px] font-semibold text-white uppercase ${roboto.className} overflow-ellipsis lg:text-nowrap`}
          >
            Smart data ingest and prep from different sources
            <div
              className={'h-2 w-32 bg-linear-to-r from-transparent to-white'}
            />
          </h1>
          <div className={`mr-20 flex flex-col gap-4 pt-8 text-white`}>
            <div>
              <div className={`text-[22px] font-semibold`}>
                Extract, transform, load and clean
              </div>
              <div className={`text-[16px] font-light ${inter.className}`}>
                Declutter your Excel and enterprise data, and make them
                meaningful.
              </div>
            </div>
            <div>
              <div className={`text-[22px] font-semibold`}>
                Understand and analyze
              </div>
              <div className={`text-[16px] font-light ${inter.className}`}>
                Algorithmically detect and report data errors and provide the
                recommendation and live notification.
              </div>
            </div>
          </div>
        </div>
        <div
          className={
            'slider-item relative !flex h-[276px] flex-col rounded-[10px] p-6'
          }
        >
          <Image
            src={'/banner-icon-2.png'}
            alt={'1'}
            width={200}
            height={200}
            className={'absolute right-[-45px] bottom-0'}
          />
          <h1
            className={`text-[26px] font-semibold text-white uppercase ${roboto.className} overflow-ellipsis lg:text-nowrap`}
          >
            Connect your data to reduce the logistics cost
            <div
              className={'h-2 w-32 bg-linear-to-r from-transparent to-white'}
            />
          </h1>
          <div className={`mr-20 flex flex-col gap-4 pt-8 text-white`}>
            <div>
              <div className={`text-[22px] font-semibold`}>
                Accurate forecasting of demand
              </div>
              <div className={`text-[16px] font-light ${inter.className}`}>
                Uncover trends to adjust your predication accordingly to save
                the cost.
              </div>
            </div>
            <div>
              <div className={`text-[22px] font-semibold`}>
                Pick your most reliable suppliers
              </div>
              <div className={`text-[16px] font-light ${inter.className}`}>
                Make better decisions with real time price and lead time
                analytics.
              </div>
            </div>
          </div>
        </div>
      </Slider>
    </SliderEl>
  );
}

const SliderEl = styled.div`
  padding-top: 40px;
  background: #e1f1ff;
  .slick-slider {
    background: #e1f1ff;
    position: relative;
    max-width: 2000px;
    margin: 0 auto;
    .slick-list {
      position: relative;
      top: -40px;
    }
    .slick-dots {
      bottom: 0;
      height: 40px;
      display: flex !important;
      align-items: center;
      justify-content: center;
      & > li {
        background: #d7dce1;
        border-radius: 3px;
        height: 3px;
        width: 20px;
        transition: all 0.3s ease-in-out;
        display: flex;
        &.slick-active {
          filter: blur(0);
          width: 120px;
          background-image: linear-gradient(91deg, #5dc1ff 0%, #0c77ea 100%);
          border-radius: 3px;
        }
      }
    }
  }
  .slick-arrow {
    display: none !important;
  }
  .slick-track {
    display: flex;
    gap: 48px;
    .slick-slide {
      .slider-item {
        transition: all 0.3s ease-in-out;
        background: #4468ab;
        opacity: 0.9;
        filter: blur(2px);
      }
      &.slick-active {
        .slider-item {
          opacity: 1;
          filter: blur(0);
          background: #0687ff;
        }
      }
    }
  }
`;
